<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shan-P2P平台->用户登录</title>
<link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.form.js"></script>

<style type="text/css">
	.el-login-form{
		width:600px; 
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
	}
	.el-login-form .form-control{
		width: 220px;
		display: inline;
	}
	.container-foot-2 {
		margin-top: 180px;
	}
</style>

<script type="text/javascript">
$(function(){
	$("#login_form").validate({
		// 添加过滤规则
		rules:{
			"username":{
				required: true,
				rangelength: [4,16]
			},
			"password":{
				required: true,
				rangelength: [4,16]
			}
		},
		// 过滤不通过的时候的显示信息
		messages:{
			"username":{
				required: "请填写用户名",
				rangelength: "用户名的长度必须为{0}到{1}位"
			},
			"password":{
				required: "请填写密码",
				rangelength: "密码的长度必须为{0}到{1}位"
			}
		},
		errorClass: "text-danger", // 提示信息的样式
		highlight: function(element, errorClass) { // 验证非法的时候就会调用这个函数: 高亮非法
			$(element).closest("div").addClass("has-error");
		},
		unhighlight: function(element, errorClass) { // 验证通过的时候调用
			$(element).closest("div").removeClass("has-error");
		},
		submitHandler:function(element) {
			$("#btn_login").button("loading");
			var username = $("#username").val();
			var password = $("#password").val();
			$.ajax({
				dataType: "json",
				type: "POST",
				url: "/login.do",
				data: {
					"username": username,
					"password": password
				},
				success: function(result){
					if (result.success) { // 登录成功
						$.messager.confirm("提示","登录成功,点击确认跳转个人中心!",function(){
							window.location.href="/personal.do";
						});
					} else { // 失败
						resetLoginButtonState();
						$.messager.alert("提示", result.info);
					}
				}, 
				error: function() {
					resetLoginButtonState();
					$.messager.alert("提示", "网络故障, 稍后再试...");
				}
			});
			return false; // 阻止表单自己提交, 我们通过Ajax提交
		}
	});
	
	function resetLoginButtonState() {
		$("#btn_login").button('reset');
	}
	
});
</script>

</head>
<body>
	<!-- 网页头信息 -->
	<div class="el-header" >
		<div class="container" style="position: relative;">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">首页</a></li>
				<li><a href="/login.html">登录</a></li>
				<li><a href="#">帮助</a></li>
			</ul>
		</div>
	</div>
	
	<!-- 网页导航 -->
	<div class="navbar navbar-default el-navbar">
		<div class="container">
			<div class="navbar-header">
				<a href=""><img alt="Brand" src="/images/logo.png"></a>
				<span class="el-page-title">用户登录</span>
			</div>
		</div>
	</div>
	
	<!-- 网页内容 -->
	<div class="container">
		<form id="login_form" class="form-horizontal el-login-form" method="post" >
			<div class="form-group">
				<label class="control-label col-sm-2">用户名</label>
				<div class="col-sm-10">
					<input type="text" autocomplete="off" name="username" id="username" class="form-control" value="shreker"/>
				</div> 
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">密&emsp;码</label>
				<div class="col-sm-10">
					<input type="password" autocomplete="off" name="password" id="password" class="form-control" value="1100"/>
				</div>
			</div>
			<div class="form-gorup">
				<div class="col-sm-offset-3">
					<button type="submit" id="btn_login" data-loading-text="正在登录, 请稍候..." class="btn btn-success" >
						登录
					</button>
					<br>
					<a href="/register.html">新用户，马上注册</a>
				</div>
			</div>
		</form>
	</div>
	
	<!-- 网页版权 -->
	<div class="container-foot-2">
		<div class="context">
			<div class="left">
				<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
				<p>版权所有：&emsp;OOOOOOOOOOOOOOO</p>
				<p>地&emsp;&emsp;址：&emsp;XXXXXXXXXXXXOOOOOOOOOOOOOOOO</p>
				<p>电&emsp;&emsp;话： xxxooo&emsp;&emsp;
					邮箱：&emsp;xx@oo.com</p>
				<p>
					<a href="http://www.miitbeian.gov.cn" style="color: #ffffff">xxoxoxoxoxo</a>
				</p>
				<p>
					<a href="XXXOOO" style="color: #ffffff">XXXOOO</a>
				</p>
			</div>
			<div class="right">
				<a target="_blank" href="XXXOOO"><img src="/images/sina.png"></a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</body>
</html>